<template>
  <div id="box">
    <ElTimeLine style="padding: 2px">
      <ElProgress
        :percentage="processPercentage"
        v-show="processPercentage <= 100"
      />
      <ElTimeLineItem
        :timestamp="item.time"
        :status="bindStatusVal[timeLineItem.status]"
        :key="item.id"
        placement="top"
        v-for="item in timeLineItem.step"
        size="large"
      >
        <el-card>
          <h3>{{ item.stepTitle }}</h3>
          <p>{{ item.description }}</p>
        </el-card>
      </ElTimeLineItem>
    </ElTimeLine>
  </div>
</template>

<script>
import { getTimeLineById } from "@/api/timeLine.js";
import ElTimeLineItem from "@/elcomponents/TimeLineItem.vue";
import ElTimeLine from "@/elcomponents/TimeLine.vue";
import ElProgress from "@/elcomponents/Process.vue";

export default {
  name: "TimeLine",
  data() {
    return {
      timeLineItem: {},
      bindStatusVal: ["success", "continue", "fail"],
      processPercentage: 0,
      intervalId: "",
    };
  },
  created() {
    this.loadTimelineItemData(this.$route.params.id);
  },
  components: {
    ElTimeLineItem,
    ElTimeLine,
    ElProgress,
  },
  methods: {
    loadTimelineItemData(id) {
      this.processPercentage = 0;
      var that = this;
      getTimeLineById(id)
        .then((res) => {
          that.timeLineItem = res;
          that.processPercentage = 100;
          clearInterval(that.intervalId);
          setTimeout(() => {
            this.processPercentage = 101;
          }, 400).bind(that);
        })
        .catch((err) => {
          console.log(err);
        });
      this.intervalId = setInterval(
        this.incrProcessPercentage.bind(that),
        300,
        this.processPercentage
      );
    },
    incrProcessPercentage() {
      if (this.processPercentage < 82) {
        this.processPercentage += Math.floor(Math.random() * 18);
      }
    },
  },
  watch: {
    $route: {
      handler() {
        this.loadTimelineItemData(this.$route.params.id);
      },
    },
  },
};
</script>

<style scoped>
</style>
